<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import BottomModal from './components/gengduo.vue';
import Pinglun from './components/pinglun.vue'
// 使用查看stores\

import { useCircleStore } from "@/stores";
const circleStore = useCircleStore()
computed(() => {
  circleStore.$state.circles
})
console.log("dd", circleStore.$state.circles);
const imgList = ref<string[]>([
  'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
  'https://gitcode.net/qq_44112897/images/-/raw/master/comic/40.jpg',
  'https://gitcode.net/qq_44112897/images/-/raw/master/comic/15.jpg'
]);
const navIndex = ref(0);
const checkIndex = async (index: number) => {
  console.log(index);
  navIndex.value = index;
};
const InderSname = ref([
  {
    id: 1,
    imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/15.jpg',
    name: "用户昵称",
    ip: '贵州',
    times: "一天前",
    tang1: "#tag1 #tag2",
    tang1_s: "11111111111",
    imageURL: ["/static/images/share-2.png",
      "/static/images/com_icon_message_pressed_3.png",
      "/static/images/thumbs-up.png",
      "/static/images/star.png"
    ],
    fen_s: "分享",
    title_s: 100,
    title1_s: 50,
    title2_s: 90,
    images: [
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',

    ]

  },
  {
    id: 2,
    imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
    name: "用户1",
    ip: '贵州',
    times: "一小时前",
    tang1: "#tag1 #tag2",
    tang1_s: "22222222222222",
    imageURL: ["/static/images/share-2.png",
      "/static/images/com_icon_message_pressed_3.png",
      "/static/images/thumbs-up.png",
      "/static/images/star.png"
    ],
    fen_s: "分享",
    title_s: 120,
    title1_s: 60,
    title2_s: 80,
    images: [
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',

    ]
  },
  {
    id: 3,
    imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/1.jpg',
    name: "用户2",
    ip: '北京',
    times: "三天前",
    tang1: "#tag1 #tag2",
    tang1_s: "333333333",
    imageURL: ["/static/images/share-2.png",
      "/static/images/com_icon_message_pressed_3.png",
      "/static/images/thumbs-up.png",
      "/static/images/star.png"
    ],
    fen_s: "分享",
    title_s: 130,
    title1_s: 70,
    title2_s: 40,
    images: [
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',

    ]
  },
  {
    id: 4,
    imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
    name: "用户3",
    ip: '上海',
    times: "两天前",
    tang1: "#tag1 #tag2",
    tang1_s: "4444444444",
    imageURL: ["/static/images/share-2.png",
      "/static/images/com_icon_message_pressed_3.png",
      "/static/images/thumbs-up.png",
      "/static/images/star.png"
    ],
    fen_s: "分享",
    title_s: 90,
    title1_s: 100,
    title2_s: 500,
    images: [

      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',

    ]
  },
  {
    id: 5,
    imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',
    name: "用户4",
    ip: '四川',
    times: "一天前",
    tang1: "#tag1 #tag2",
    tang1_s: "11111111111",
    imageURL: ["/static/images/share-2.png",
      "/static/images/com_icon_message_pressed_3.png",
      "/static/images/thumbs-up.png",
      "/static/images/star.png"
    ],
    fen_s: "分享",
    title_s: 40,
    title1_s: 50,
    title2_s: 90,
    images: [
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',

      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',

    ]

  },
  {
    id: 6,
    imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/17.jpg',
    name: "用户5",
    ip: '广西',
    times: "一小时前",
    tang1: "#tag1 #tag2",
    tang1_s: "22222222222222",
    imageURL: ["/static/images/share-2.png",
      "/static/images/com_icon_message_pressed_3.png",
      "/static/images/thumbs-up.png",
      "/static/images/star.png"
    ],
    fen_s: "分享",
    title_s: 170,
    title1_s: 60,
    title2_s: 80,
    images: [
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/30.jpg',


    ]
  },
  {
    id: 7,
    imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
    name: "用户6",
    ip: '江苏',
    times: "五天前",
    tang1: "#tag1 #tag2",
    tang1_s: "333333333",
    imageURL: ["/static/images/share-2.png",
      "/static/images/com_icon_message_pressed_3.png",
      "/static/images/thumbs-up.png",
      "/static/images/star.png"
    ],
    fen_s: "分享",
    title_s: 130,
    title1_s: 70,
    title2_s: 40,
    images: [
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',


    ]
  },
  {
    id: 8,
    imageurl: 'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
    name: "用户7",
    ip: '上海',
    times: "两天前",
    tang1: "#tag1 #tag2",
    tang1_s: "4444444444",
    imageURL: ["/static/images/share-2.png",
      "/static/images/com_icon_message_pressed_3.png",
      "/static/images/thumbs-up.png",
      "/static/images/star.png"
    ],
    fen_s: "分享",
    title_s: 90,
    title1_s: 100,
    title2_s: 500,
    images: [
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/8.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
      'https://gitcode.net/qq_44112897/images/-/raw/master/comic/24.jpg',


    ]
  },
])
// 关注
// 随机分配
const shuffleData = () => {
  const data = InderSname.value;
  for (let i = data.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [data[i], data[j]] = [data[j], data[i]];
  }
  InderSname.value = data;
};
// 刷新页面
const isTriggered = ref(false)
const onRefresh = async () => {
  isTriggered.value = true
  await Promise.all([
    InderSname
  ])
  shuffleData(); // 在这里进行数据随机调换
  setTimeout(() => {
    console.log("刷新成功");
    isTriggered.value = false;
  }, 500);
}
const isFollowed = ref<{ [key: number]: boolean }>({});

const toggleFollow = (index: number) => {
  isFollowed.value[index] = !isFollowed.value[index];
};


const showModal = ref(false)
const showPing = ref(false)
// 发现
const navIndex1 = ref(0)
const checkIndex1 = (index: number) => {
  navIndex1.value = index
}
const tuiIndex = ref(0)
const chetuiIndex = (index: number) => {
  tuiIndex.value = index
  console.log(tuiIndex.value);
}

</script>
<template>
  <view>理论测试</view>
  <view class="boxs" style="display: none;">
    <view class="header">
      <navigator url="/pages/" class="left" open-type="switchTab">社区</navigator>
      <view class="mid">
        <view class="search-box">
          <img src="@/static/images/search@2x.png" alt="" class="search-img" />
          <input type="text" placeholder="关键词搜索" class="search-input" />
        </view>
      </view>
      <view class="right">
        <img src="@/static/images/mail@2x.png" class="email-img" />
      </view>
    </view>
    <!-- 发现判断的轮播图 -->
    <view v-if="navIndex == 1">
      <swiper :autoplay="false" :circular="true" class="subfloat_pictures">
        <swiper-item v-for="(image, index) in imgList" :key="index">
          <image :src="image" mode="aspectFill" class="cannaserver" />
        </swiper-item>
      </swiper>
    </view>
    <view class="heads">
      <view class="head-nav">
        <view :class="navIndex == 0 ? 'activite' : ''" @click="checkIndex(0)">关注</view>
        <view :class="navIndex == 1 ? 'activite' : ''" @click="checkIndex(1)">发现</view>
        <view :class="navIndex == 2 ? 'activite' : ''" @click="checkIndex(2)">圈子</view>
      </view>
    </view>
    <scroll-view scroll-y class="scroll-view" refresher-enabled>
      <!-- 关注 -->
      <view class="content1" v-if="navIndex == 0">
        <view class="mid-hav">
          <view class="" v-for="(it, index) in InderSname" :key="index">
            <view class="content1">
              <view class="hav1">
                <navigator url="/pages/namelist/namelist" open-type="navigate" hover-class="navigator-hover"
                  class="img-path">
                  <view class="imag">
                    <image :src="it.imageurl" mode="scaleToFill" class="image1" />
                  </view>
                  <view class="hu">
                    <text class="name">{{ it.name }}</text>
                    <view class="it">
                      {{ it.times }}&nbsp;.{{ it.ip }}
                    </view>
                  </view>
                </navigator>
                <view class="cz">
                  <view @click="toggleFollow(index)" class="button">
                    {{ isFollowed[index] ? '已关注' : '关注' }}
                  </view>
                </view>
              </view>
              <view class="tag">
                <text class="tag1">{{ it.tang1 }}</text>
                <text class="tag2">{{ it.tang1_s }}</text>
              </view>

              <view class="ims">
                <view v-for="(image, index) in it.images " :key="index">
                  <image :src="image" mode="scaleToFill" class="ims2" />
                </view>
              </view>
              <view class="fen"></view>
              <view class="ove">
                <view class="ove1">
                  <image :src="it.imageURL[0]" mode="scaleToFill" class="ove3" />
                  <view class="ove4">{{ it.fen_s }}</view>
                  <image :src="it.imageURL[1]" mode="scaleToFill" class="ove3" @click="showPing = true" />
                  <view class="ove4">{{ it.title_s }}</view>
                  <image :src="it.imageURL[2]" mode="scaleToFill" class="ove3" />
                  <view class="ove4">{{ it.title1_s }}</view>
                  <image :src="it.imageURL[3]" mode="scaleToFill" class="ove3" />
                  <view class="ove4">{{ it.title2_s }}</view>
                </view>
                <view class="over" @click="showModal = true">
                  <image src="/static/images/icon_more-vertical_default.png" mode="scaleToFill" class="over1" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 发现圈子 -->
      <view class="content2" v-if="navIndex == 1">
        <view class="boxmid">
          <view class="head-nav1">
            <view :class="navIndex1 == 0 ? 'activite1' : ''" @click="checkIndex1(0)">热门话题</view>
            <view :class="navIndex1 == 1 ? 'activite1' : ''" @click="checkIndex1(1)">热门圈子</view>
          </view>
          <view class="content11" v-if="navIndex1 == 0">
            <view class="con-box1">
              <view class="transan"></view>
              <view class="transi">
                <view class="tr1">
                  <span>1</span>
                  <text class="tr11">2024债务清零成功上岸</text>
                </view>
                <view class="tr2">
                  <view class="tr2-box1">
                    <span>2</span>
                    <text class="tr11">2024债务清零成功上岸</text>
                  </view>
                  <view class="tr2-box2">
                    <text class="te1">大</text>
                    <text class="te2">不大</text>
                  </view>
                </view>
                <view class="tr3">
                  <span>3</span>
                  <text class="tr11">网贷协商攻略</text>
                </view>
              </view>
            </view>
          </view>
          <view class="content22" v-if="navIndex1 == 1">
            <view class="con-box2">
              <view class="transan2"></view>
              <view class="transi2"> 热门话题内容</view>
            </view>
          </view>
        </view>
        <view class="xia-box">
          <view class="sticky">
            <view class="tui-box">
              <view :class="tuiIndex == 0 ? 'tuiIndex' : ''" @click="chetuiIndex(0)">推荐</view>
              <view :class="tuiIndex == 1 ? 'tuiIndex' : ''" @click="chetuiIndex(1)">新发</view>
              <view :class="tuiIndex == 2 ? 'tuiIndex' : ''" @click="chetuiIndex(2)">#成功上岸</view>
              <view :class="tuiIndex == 3 ? 'tuiIndex' : ''" @click="chetuiIndex(3)">#求助问答</view>
            </view>
          </view>

          <view class="tui-box1" v-if="tuiIndex == 0">
            <view class="" v-for="(it, index) in InderSname" :key="index">
              <view class="content1">
                <view class="hav1">
                  <navigator url="/pages/namelist/namelist" open-type="navigate" hover-class="navigator-hover"
                    class="img-path">
                    <view class="imag">
                      <image :src="it.imageurl" mode="scaleToFill" class="image1" />
                    </view>
                    <view class="hu">
                      <text class="name">{{ it.name }}</text>
                      <view class="it">
                        {{ it.times }}&nbsp;.{{ it.ip }}
                      </view>
                    </view>
                  </navigator>
                  <view class="cz">
                    <!-- <view class="button">关注</view> -->
                    <view @click="toggleFollow(index)" class="button">
                      {{ isFollowed[index] ? '已关注' : '关注' }}
                    </view>
                  </view>
                </view>
                <view class="tag">
                  <text class="tag1">{{ it.tang1 }}</text>
                  <text class="tag2">{{ it.tang1_s }}</text>
                </view>

                <view class="ims">
                  <view v-for="(image, index) in it.images " :key="index">
                    <image :src="image" mode="scaleToFill" class="ims2" />
                  </view>
                </view>
                <view class="fen"></view>
                <view class="ove">
                  <view class="ove1">
                    <image :src="it.imageURL[0]" mode="scaleToFill" class="ove3" />
                    <view class="ove4">{{ it.fen_s }}</view>
                    <image :src="it.imageURL[1]" mode="scaleToFill" class="ove3" />
                    <view class="ove4">{{ it.title_s }}</view>
                    <image :src="it.imageURL[2]" mode="scaleToFill" class="ove3" />
                    <view class="ove4">{{ it.title1_s }}</view>
                    <image :src="it.imageURL[3]" mode="scaleToFill" class="ove3" />
                    <view class="ove4">{{ it.title2_s }}</view>
                  </view>
                  <view class="over">
                    <image src="/static/images/icon_more-vertical_default.png" mode="scaleToFill" class="over1" />
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="content11" v-if="tuiIndex == 1">
            <view class="con-box1">
              <view class="transan"></view>
              <view class="transi"> </view>
            </view>
          </view>
          <view class="content11" v-if="tuiIndex == 2">
            <view class="con-box1">
              <view class="transan"></view>
              <view class="transi"></view>
            </view>
          </view>
          <view class="content11" v-if="tuiIndex == 3">
            <view class="con-box1">
              <view class="transan"></view>
              <view class="transi"></view>
            </view>
          </view>
        </view>
      </view>
      <view class="content3" v-if="navIndex == 2">
        <view class="qus">
          <text class="wo-box">我的关注</text>
          <scroll-view scroll-x>
            <view class="clow">
              <view v-for="index in 6" :key="index">
                <view class="clow1">
                  <view class="w-box1">
                    <image src="" mode="scaleToFill" class="w-img" />
                    <view class="w-tit">
                      <text class="w-datit">网贷协商</text>
                      <text class="w-xitit">1000人已加入</text>
                    </view>
                  </view>
                  <text class="w-box2">圈子内最新动态内容</text>
                  <text class="w-box3">圈子内最新动态内容</text>
                </view>
              </view>
            </view>
          </scroll-view>
          <view class="fx-box">
            <text class="fa-box">发现圈子</text>
            <navigator class="xin-box" @click="Newbu" url="/pages/newfb/newfb">
              <view class="xw-box">+</view>
              <text class="xq-box">新建圈子</text>
            </navigator>
          </view>
          <scroll-view scroll-x>
            <view class="clows">
              <view v-for="index in 6" :key="index">
                <view class="clow1s">
                  <view class="re-box1">
                    <text class="re-box2">热门圈子</text>
                    <uni-icons type="right" size="30" color="#fff" class="reg-box"></uni-icons>
                  </view>
                  <view class="re-box3" v-for="index in 2" :key="index" :style="{ marginTop: index == 2 ? '0' : '20' }">
                    <image src="" mode="scaleToFill" class="re1" />
                    <view class="res">
                      <text class="re2">网贷协商</text>
                      <text class="re3">1000人已加入</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
          <view class="bottnons-box" v-for="index in 5" :key="index">
            <view class="tops-box">
              <image src="" mode="scaleToFill" class="tu-z" />
              <view class="mid-z">
                <text class="mid1-z">90后还贷日常</text>
                <text class="mid2-z">1000人已加入</text>
              </view>
              <navigator url="/pages/" open-type="navigate" hover-class="navigator-hover" class="qu-z">进入圈子</navigator>
            </view>
            <view v-for="index in 2" :key="index" class="tex" :style="{ marginTop: index == 2 ? '0' : '18' }">
              <text class=" boton-box2">圈子内最新动态内容</text>
            </view>
          </view>
          <view class="botos">没有更多</view>
        </view>
      </view>
    </scroll-view>
    <!-- 更多 -->
    <BottomModal :visible="showModal" @update:visible="showModal = $event">
      <!-- 在这里放置你想在模态窗口中显示的内容 -->
      <view class="geng">
        <text class="tops-box">更多</text>
        <view class="mids-box">
          <view class="lefs-box">
            <image src="/static/images/icon_sixin_default.png" mode="scaleToFill" class="lefs-img" />
            <text class="lefs-title">私信</text>
          </view>
          <view class="mods-box">
            <image src="/static/images/icon_buganxingqu_default.png" mode="scaleToFill" class="mods-img" />
            <text class="mods-title">不能感兴趣</text>
          </view>
          <view class="regs-box"></view>
        </view>
        <view class="bots-box">
          <image src="/static/images/编组.png" mode="scaleToFill" class="bots-box" />
        </view>
      </view>
    </BottomModal>
    <!-- 评论 -->
    <Pinglun :visible="showPing" @update:visible="showPing = $event">
    </Pinglun>
  </view>
</template>
<style lang="scss">
page {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.scroll-view {
  flex: 1;
  overflow: hidden;
}

.boxs {
  width: 100%;
  height: 100%;
  // position: relative;
  display: flex;
  flex-direction: column;
}

.viewport {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
}

.header {
  display: flex;
  height: 92rpx;
  margin: 0 64rpx;
  margin-top: 150rpx;
  background-color: #fff;

  .left {
    margin-top: 0;
    display: flex;
    align-items: center;
    flex-grow: 1;
    font-size: 30rpx;
    font-family: Inter, Inter-700;
    font-weight: 700;
    text-align: CENTER;
    color: #f2bb16;
  }

  .mid {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .search-box {
      display: flex;
      align-items: center;
      width: 452rpx;
      height: 70rpx;
      background: #fffaec;
      border-radius: 20rpx;
      box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 0, 0, 0.15);

      .search-img {
        width: 34rpx;
        height: 34rpx;
        margin-left: 18rpx;
        margin-right: 10rpx;
      }

      .search-input {
        font-size: 30rpx;
        font-weight: 400;

        &::placeholder {
          color: #000000 26%;
        }
      }
    }
  }

  .right {

    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-grow: 1;

    .email-img {
      width: 48rpx;
      height: 48rpx;
    }
  }
}

.heads {
  .head-nav {
    /* margin: 24rpx 64rpx; */
    margin-top: 24rpx;
    margin-left: 64rpx;
    margin-right: 368rpx;
    height: 74rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-500;
    font-weight: 500;
    text-align: LEFT;
    color: #949090;
    line-height: 38rpx;

  }

  .activite {
    display: flex;
    color: #000000;
    text-decoration: underline;
    text-decoration-color: #f2bb16;
    font-weight: bolder 30rpx;
    text-underline-offset: 10rpx;

  }

  .head-nav>view {
    padding-bottom: 10rpx;

  }
}

// 轮播
.subfloat_pictures {
  display: flex;
  margin-top: 24rpx;
  margin-left: 64rpx;
  align-items: center;
  width: 632rpx;
  height: 150rpx;
  overflow: hidden;
  border-radius: 20rpx;
  box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

  .cannaserver {
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 632rpx;
    height: 150rpx;
    border-radius: 20rpx;
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
  }
}

@import './category.scss'
</style>
